<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="150px">
      <el-form-item label="redis" prop="redis">
        <el-input v-model="form.redis" placeholder="填写membership或者crm-main，Br则填写membershipBr或者crm-mainBr" style="width: 50%"></el-input>
      </el-form-item>
      <el-form-item label="key" prop="key">
        <el-input v-model="form.key" placeholder="请填写key名，例如 RU:DI:PU:SG:439512" style="width: 50%"></el-input>
      </el-form-item>
      <el-form-item label="env" prop="env">
        <el-radio v-model="form.env" label="test">test</el-radio>
        <el-radio v-model="form.env" label="uat">uat</el-radio>
        <el-radio v-model="form.env" label="staging">staging</el-radio>
      </el-form-item>
      <el-form-item style="margin-top: 20px">
        <el-button type="primary" @click="onSubmit('form')">立即查询</el-button>
      </el-form-item>
    </el-form>
    <div v-if="showResultCard" v-loading="isLoadingResult">
      <result-pane :resultReturn="resultReturn"></result-pane>
    </div>

    <el-form ref="form1" :model="form1" :rules="rules" label-width="150px">
      <el-form-item label="redis" prop="redis">
        <el-input v-model="form1.redis" placeholder="填写membership或者crm-main,Br则填写membershipBr或者crm-mainBr" style="width: 50%"></el-input>
      </el-form-item>
      <el-form-item label="key" prop="key">
        <el-input v-model="form1.key" placeholder="请填写key名，例如 RU:DI:PU:SG:439512" style="width: 50%"></el-input>
      </el-form-item>
      <el-form-item label="env" prop="env">
        <el-radio v-model="form1.env" label="test">test</el-radio>
        <el-radio v-model="form1.env" label="uat">uat</el-radio>
        <el-radio v-model="form1.env" label="staging">staging</el-radio>
      </el-form-item>
      <el-form-item style="margin-top: 20px">
        <el-button type="primary" @click="delSumbit('form1')">立即删除</el-button>
      </el-form-item>
    </el-form>
    <div v-if="showResultCard1" v-loading="isLoadingResult1">
      <result-pane :resultReturn="resultReturn1"></result-pane>
    </div>

    <shopee-tabs value="MBS">
      <shopee-tab-pane label="crm" name="CRM">
        <el-table :data="CrmRedisData" border style="width: 100%; margin-top: 20px">
          <el-table-column prop="project" label="项目" width="180"></el-table-column>
          <el-table-column prop="redis_name" label="Crm Redis名称"></el-table-column>
          <el-table-column prop="key" label="key"></el-table-column>
        </el-table>
      </shopee-tab-pane>
      <shopee-tab-pane label="mbs" name="MBS">
        <el-table :data="MbsRedisData" border style="width: 100%; margin-top: 20px">
          <el-table-column prop="project" label="项目" width="180"></el-table-column>
          <el-table-column prop="redis_name" label="Mbs Redis名称"></el-table-column>
          <el-table-column prop="key" label="key"></el-table-column>
        </el-table>
      </shopee-tab-pane>
     </shopee-tabs>
  </div>
</template>

<script>
  import ResultPane from './ResultPane'
  import {api, postRequest} from "@/api/commit";
  export default {
    name: "QueryReids",
    data() {
      return {
        showResultCard: false,
        isLoadingResult: false,
        showResultCard1: false,
        isLoadingResult1: false,
        form: {
          redis: '',
          key: '',
          env: 'test'
        },
        form1: {
          redis: '',
          key: '',
          env: 'test'
        },
        rules: {
          redis: [
            {required: true, message: 'redis不能为空', trigger: 'blur'}
          ],
          key: [
            {required: true, message: 'key不能为空', trigger: 'blur'}
          ],
          env: [
            {required: true, message: 'env不能为空', trigger: 'blur'}
          ],
        },
        CrmRedisData: [{
          project:'CRM',
          redis_name: 'crm-main',
          key: [
            "xxxx",
          ],
        }],
        MbsRedisData: [{
          project:'MBS',
          redis_name: 'membership',
          key: [
            "是否publish：RU:DI:PU:region:shop_id\r\n",
            "查询等级规则：RU:TI:region:shopID\r\n",
            "用户等级缓存：MA:TR:region:shopid:userid\r\n",
            "用户积分缓存：PO:region:shopid:userid\r\n",
            "point reward规则：RU:BE:PO:region:shopID\r\n",
            "积分规则：RU:PO:region:shopID\r\n",
            "等级规则：RU:TI:region:shopID\r\n",
            "生日福利规则：RU:BI:region:shopID\r\n",
          ],
        }],
      }
    },
    components:{
      ResultPane
    },
    methods: {
      onSubmit(form) {
        this.$refs[form].validate((valid) => {
          if (!valid) {
            this.$message({
              "message": "请检查表单！",
              "type": "warning"
            })
            return
          }
          this.resultReturn =''
          this.showResultCard = true
          this.isLoadingResult = true
          let params = Object.assign({}, this.form);
          postRequest(api['query_redis'], params).then((res)=>{
            this.resultReturn = res.resultReturn
            this.isLoadingResult = false
          },(error)=>{
            this.resultReturn = "请检查您的输入是不是有问题&依赖方报错俺也没办法"
            this.isLoadingResult = false
          })
        })
      },
      delSumbit(form1) {
        this.$refs[form1].validate((valid) => {
          if (!valid) {
            this.$message({
              "message": "请检查表单！",
              "type": "warning"
            })
            return
          }
          this.resultReturn1 =''
          this.showResultCard1 = true
          this.isLoadingResult1 = true
          let params = Object.assign({}, this.form1);
          postRequest(api['del_redis'], params).then((res)=>{
            this.resultReturn1 = res.resultReturn
            this.isLoadingResult1 = false
          },(error)=>{
            this.resultReturn = "请检查您的输入是不是有问题&依赖方报错俺也没办法"
            this.isLoadingResult1 = false
          })
        })
      }
    },
  }
</script>

<style scoped>

</style>
